<template>
  <div class="boss">
    <div id="hbox"></div>
  </div>
</template>

<script>
//echarts
import * as echarts from "echarts";

export default {
  props: {
    hdata: {
      type: Array,
    },
    type1: {
      type: Number,
    },
  },
  data() {
    return {
      // a: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    };
  },
  mounted() {
    this.isEcharts(this.date);
  },

  computed: {
    date() {
      var brr = [];
      var crr = [];
      if (this.hdata.length > 0) {
        var arr = this.hdata;
        if (this.type1 == 0) {
          for (var i = 0; i < arr.length; i++) {
            brr.push(arr[arr.length - 1 - i].date);
            crr.push(arr[arr.length - 1 - i].average);
          }
        } else if (this.type1 == 1) {
          for (var i = 0; i < 24; i++) {
            brr.push(i + ":00");
          }
          crr = arr[0].temp;
        } else if (this.type1 == 2) {
          brr = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
          for (var i = 0; i < arr.length; i++) {
            crr.push(arr[arr.length - 1 - i].average);
          }
        } else if (this.type1 == 3) {
          for (var i = 0; i < arr.length; i++) {
            brr.push(i + 1);
            crr.push(arr[arr.length - 1 - i].average);
          }
        } else if (this.type1 == 4) {
          for (var i = 0; i < arr.length; i++) {
            brr.push(arr[arr.length - 1 - i].date);
            crr.push(arr[arr.length - 1 - i].average);
          }
        }
      }
      return { brr, crr };
    },
  },
  watch: {
    hdata: {
      deep: true,
      handler() {
        this.isEcharts(this.date);
      },
    },
  },
  methods: {
    isEcharts(date) {
      var myChart1 = echarts.init(document.getElementById("hbox"));
      myChart1.setOption({
        tooltip: {
          show: true,
          trigger: "axis",
        },
        xAxis: {
          // show: false,
          type: "category",
          data: date.brr,
          boundaryGap: false,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dashed", //虚线
            },
            show: true, //隐藏
          },
          axisLabel: {
            showMaxLabel: true,
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            onZero: true,
          },
          max: 40,
          splitLine: {
            lineStyle: {
              type: "dashed", //虚线
            },
            show: true, //隐藏
          },
          axisLabel: {
            formatter: function (value, index) {
              if (index != 0) {
                return value + "℃";
              } else {
                return value;
              }
            },
          },
        },
        series: [
          {
            name: "温度",
            type: "line",
            symbol: "none",
            data: date.crr,
            smooth: 0.5,
            smoothConstraint: false,
            animationEasing: "linear",
            animationDuration: 2000,
            areaStyle: {
              //覆盖区域的渐变色

              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(76,103,253,1)", // 0% 处的颜色
                  },
                  {
                    offset: 0.7,
                    color: "rgba(58,132,255, 0)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },

            //线条渐变
            itemStyle: {
              //线条的渐变
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(76,103,253,1)", // 0% 处的颜色
                },
                {
                  offset: 0.4,
                  color: "rgba(76,103,253,1)", // 70% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(58,132,255, 0.1)", // 100% 处的颜色
                },
              ]),
            },
          },
        ],
      });
    },
  },
};
</script>

<style lang="less" scoped>
.boss {
  height: 389px;
  width: 840px;
  border-radius: 0 0 8px 8px;
  background-color: #fff;
}
#hbox {
  height: 389px;
  width: 840px;
}
</style>